<template>
    <div class="jt-confirm flexR-Cen" :class="{ 'dialog--is-visible': isShow }">
        <div class="wrapper">
            <div v-if="title" class="head">
                <p>{{ title }}</p>
                <i class="iconfont icon-guanbi" @click="handleClose" />
            </div>
            <div class="body">
                <i class="iconfont icon-warning" />
                <span>{{ message }}</span>
            </div>
            <div class="foot">
                <button class="cd-btn cd-btn--subtle js-dialog__close" @click="handleClose">取消</button>
                <button class="cd-btn" :class="'cd-btn--' + type" @click="handleConfirm">确认</button>
            </div>
        </div>
    </div>
</template>

<script setup name="JTMessageBox">

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    message: {
        type: String,
        default: 'hello word'
    },
    title: {
        type: String,
        default: ''
    },
    type: {
        type: String,
        default: 'primary'
    },
    confirm: {
        type: Function,
        default: () => { }
    },
    close: {
        type: Function,
        default: () => { }
    }
})
let isShow = ref(false)
// const emit = defineEmits(['update:show'])

const handleConfirm = () => {
    isShow.value = false
    setTimeout(() => {
        props.confirm()
    }, 200)
}
const handleClose = () => {
    isShow.value = false
    setTimeout(() => {
        props.close()
    }, 200)
}

onMounted(() => {
    setTimeout(() => {
        isShow.value = props.show
    }, 200)
})

</script>

<style lang="scss">
$XZColor: #27ba9b;
.jt-confirm {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 8888;
    background: rgb(0 0 0 / 50%);
    opacity: 0;
    transition: opacity 0.2s;
    &.dialog--is-visible {
        opacity: 1;
    }
    &.dialog--is-visible .wrapper {
        transform: translateY(0);
    }
}
.wrapper {
    overflow: auto;
    padding: 24px;
    background: #fff;
    border-radius: 10px;
    box-shadow:
        0 0 0 1px hsl(230deg 13% 9% / 5%),
        0 1.2px 1.9px -1px hsl(230deg 13% 9% / 1%),
        0 3px 5px -1px hsl(230deg 13% 9% / 1.5%),
        0 8px 15px -1px hsl(230deg 13% 9% / 5%),
        0 28px 40px -1px hsl(230deg 13% 9% / 10%);
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateY(20%);
    >.head {
        color: hsl(230deg 13% 9%);
        font-size: 22px;
        margin-bottom: 12px;
        >.iconfont {
            cursor: pointer;
        }
        >p {
            font-size: 18px;
        }
    }
    >.body {
        color: hsl(230deg 13% 9%);
        font-size: 16px;
        margin-bottom: 12px;
        .icon-warning {
            margin-right: 6px;
            color: #cf4444;
        }
    }
    .foot {
        margin-top: 24px;
        display: flex;
        gap: 15px;
        justify-content: flex-end;
        .cd-btn {
            position: relative;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
            padding: 0.5rem 1rem;
            border-radius: 0.375em;
            font-size: 1em;
            text-decoration: none;
            line-height: 1.2;
            cursor: pointer;
            transition: 0.2s;
            will-change: transform;
            border: 0;
        }
        .cd-btn:focus-visible {
            outline: none;
        }
        .cd-btn:active {
            transform: translateY(2px);
        }
        .cd-btn--primary {
            background: hsl(217deg 100% 43%);
            box-shadow:
                inset 0 1px 0 hsl(0deg 0% 100% / 15%),
                0 1px 3px hsl(217deg 84% 38% / 25%),
                0 2px 6px hsl(217deg 84% 38% / 10%),
                0 6px 10px -2px hsl(217deg 84% 38% / 25%);
            color: hsl(0deg 0% 100%);
        }
        .cd-btn--primary:hover {
            background: hsl(217deg 84% 60%);
            box-shadow:
                inset 0 1px 0 hsl(0deg 0% 100% / 15%),
                0 1px 2px hsl(217deg 84% 38% / 25%),
                0 1px 4px hsl(217deg 84% 38% / 10%),
                0 3px 6px -2px hsl(217deg 84% 38% / 25%);
        }
        .cd-btn--primary:focus-visible {
            box-shadow:
                inset 0 1px 0 hsl(0deg 0% 100% / 15%),
                0 1px 2px hsl(217deg 84% 38% / 25%),
                0 1px 4px hsl(217deg 84% 38% / 10%),
                0 3px 6px -2px hsl(252170deg 84% 38% / 25%),
                0 0 0 2px hsl(0deg 0% 100%),
                0 0 0 4px hsl(217deg 84% 54%);
        }
        .cd-btn--subtle {
            background: hsl(0deg 0% 100%);
            color: hsl(230deg 13% 9%);
            box-shadow:
                inset 0 1px 0 hsl(0deg 0% 100% / 10%),
                0 0 0 1px hsl(230deg 13% 9% / 2%),
                0 0.3px 0.4px hsl(230deg 13% 9% / 2.5%),
                0 1px 3px -1px hsl(230deg 13% 9% / 20%),
                0 3.5px 6px hsl(230deg 13% 9% / 12%);
        }
        .cd-btn--subtle:hover {
            background: hsl(0deg 0% 100%);
            box-shadow:
                inset 0 1px 0 hsl(0deg 0% 100% / 10%),
                0 0 0 1px hsl(230deg 13% 9% / 2%),
                0 0.1px 0.3px hsl(230deg 13% 9% / 6%),
                0 1px 2px hsl(230deg 13% 9% / 12%),
                0 1px 3px -1px hsl(230deg 13% 9% / 20%);
        }
        .cd-btn--subtle:focus-visible {
            box-shadow:
                inset 0 1px 0 hsl(0deg 0% 100% / 10%),
                0 0 0 1px hsl(230deg 13% 9% / 2%),
                0 0.3px 0.4px hsl(230deg 13% 9% / 2.5%),
                0 1px 3px -1px hsl(230deg 13% 9% / 20%),
                0 3.5px 6px hsl(230deg 13% 9% / 12%),
                0 0 0 2px hsl(0deg 0% 100%),
                0 0 0 4px hsl(230deg 7% 23%);
        }
        .cd-btn--warning {
            background: hsl(342deg 89% 48%);
            color: hsl(0deg 0% 100%);
            box-shadow:
                inset 0 1px 0 hsl(0deg 0% 100% / 15%),
                0 1px 3px hsl(342deg 89% 38% / 25%),
                0 2px 6px hsl(342deg 89% 38% / 10%),
                0 6px 10px -2px hsl(342deg 89% 38% / 25%);
        }
        .cd-btn--warning:hover {
            background: hsl(342deg 89% 56%);
            box-shadow:
                inset 0 1px 0 hsl(0deg 0% 100% / 15%),
                0 1px 2px hsl(342deg 89% 38% / 25%),
                0 1px 4px hsl(342deg 89% 38% / 10%),
                0 3px 6px -2px hsl(342deg 89% 38% / 10%);
        }
        .cd-btn--warning:focus-visible {
            box-shadow:
                inset 0 1px 0 hsl(0deg 0% 100% / 15%),
                0 1px 2px hsl(342deg 89% 38% / 25%),
                0 1px 4px hsl(342deg 89% 38% / 10%),
                0 3px 6px -2px hsl(342deg 89% 38% / 10%),
                0 0 0 2px hsl(0deg 0% 100%),
                0 0 0 4px hsl(342deg 89% 48%);
        }
        .cd-btn--disabled,
        .cd-btn[disabled],
        .cd-btn[readonly] {
            opacity: 0.6;
            cursor: not-allowed;
        }
    }
}
[data-mode="pc"] {
    .wrapper {
        width: 26%;
        max-width: 30%;
    }
}
[data-mode="mobile"] {
    .wrapper {
        width: 60%;
    }
}
</style>
